<!-- 异步组件 -->

<template>
  <div class="shop" @click="toMallDetail">
    <div class="shop-item" v-for="item in shopList">
      <div class="shop-item-icon">
        <img :src="item.imgUrl" />
      </div>
      <div class="shop-item-info">
        <ul>
          <li style="margin: 0;">
            <h2>{{ item.title }}</h2>
          </li>
          <li>{{ item.tags }}</li>
          <li style="color:red;">{{ item.notice }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import axios from 'axios'
import { onMounted } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const { data: res } = await axios.get('/data/shop.json')
let shopList = res.data
const toMallDetail = () => {
  router.push('/mallDetail')
}




</script>
<style lang='scss' scoped>
.shop {
  width: 90vw;
  margin: 10rem auto;
  &-item {
    height: 100rem;
    display: flex;
    border-bottom: 1rem solid #ddd;
    padding-top: 10rem;
    &-icon {
      width: 70rem;
      height: 100%;
      img {
        width: 70rem;
        height: 70rem;
        border-radius: 50%;
      }
    }
    &-info {
      flex: 1;
      padding-left: 10rem;
      ul {
        li {
          margin: 10rem 0;
        }
      }
    }
  }
}
</style>